<!DOCTYPE html>
<html class="x-admin-sm"  lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />-->
        <link rel="stylesheet" href="../css/font.css">
        <script src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="../css/xadmin.css">
        <script src="../lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../js/xadmin.js"></script>
        <link rel="stylesheet" href="../css/bootstrap.min.css">
        <!--[if lt IE 9]>
<--          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>-->
<!--          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>-->
        <![endif]-->
        <script>
            $(function(){
                // alert("s");
                getempType();
                getDept();
                to_page(1);
            })

            //定位到第一页
            function to_page(pn){
                $.ajax({
                    url:"emp/finduser",
                    type:"GET",
                    data:{
                        "pn":pn
                    },
                    success:function(result){
                        findalluser(result);
                        build_page_info(result);
                        build_page_nav(result);
                    }
                })
            }

            //查询所有员工 动态添加到表中
            function findalluser(result){
                var users=result.list;
                $("#user_table tbody").empty();
                $.each(users,function(index,n){
                    var empId=$("<td></td>").append(n.empId);
                    var ename=$("<td></td>").append(n.ename);
                    var account=$("<td></td>").append(n.account);
                    var tel=$("<td></td>").append(n.tel);
                    var job=$("<td></td>").append(n.typeName);
                    var deptid=$("<td></td>").append(n.dName);
                    var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                        .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                    editBtn.attr("edit-id", n.empId);
                    var btnTd = $("<td></td>").append(editBtn);
                    $("<tr></tr>")
                    .append(empId)
                    .append(ename)
                    .append(account)
                    .append(tel)
                    .append(job)
                    .append(deptid)
                    .append(btnTd)
                    .appendTo("#user_table tbody")
                })
            }
            //显示分页条数据
            function build_page_info(result) {
                $("#page_info_area").empty()
                $("#page_info_area").append("当前" + result.pageNum + "页,总" +
                    result.pages + "页,总" +
                    result.total + "条记录");

            }

            //显示导航条数据
            function build_page_nav(result) {
                //page_nav_area
                $("#page_nav_area").empty();
                var ul = $("<ul></ul>").addClass("pagination");

                //构建元素
                var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
                var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
                if (result.hasPreviousPage == false) {
                    firstPageLi.addClass("disabled");
                    prePageLi.addClass("disabled");
                } else {
                    //为元素添加点击翻页的事件
                    firstPageLi.click(function () {
                        to_page(1);
                    });
                    prePageLi.click(function () {
                        to_page(result.pageNum - 1);
                    });
                }
                var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
                var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
                if (result.hasNextPage == false) {
                    nextPageLi.addClass("disabled");
                    lastPageLi.addClass("disabled");
                } else {
                    nextPageLi.click(function () {
                        to_page(result.pageNum + 1);
                    });
                    lastPageLi.click(function () {
                        to_page(result.pages);
                    });
                }


                //添加首页和前一页 的提示
                ul.append(firstPageLi).append(prePageLi);
                //1,2，3遍历给ul中添加页码提示
                $.each(result.navigatepageNums, function (index, item) {

                    var numLi = $("<li></li>").append($("<a></a>").append(item));
                    if (result.pageNum == item) {
                        numLi.addClass("active");
                    }
                    numLi.click(function () {
                        to_page(item);
                    });
                    ul.append(numLi);
                });
                //添加下一页和末页 的提示
                ul.append(nextPageLi).append(lastPageLi);

                //把ul加入到nav
                var navEle = $("<nav></nav>").append(ul);
                navEle.appendTo("#page_nav_area");

            }

            //获取员工类型
            function getempType(){
                $.ajax({
                    url:"emp/gettype",
                    type:"GET",
                    success:function (resp){
                        $.each(resp,function (index,item){
                            $("#role").append("<option id="+item.empTypeId+" value="+item.empTypeId+">"+item.typeName+"</option>")
                        })
                    }

                })
            }

            //获取员工部门信息
            function getDept(){
                $.ajax({
                    url:"emp/finddept",
                    type:"GET",
                    success:function (resp){
                        $.each(resp,function (index,item){
                            $("#dept").append("<option id="+item.deptId+" value="+item.deptId+">"+item.dname+"</option>")
                        })
                    }

                })
            }

            $(document).on("click",".edit_btn",function(){
                // alert("ss")
                //根据id获取员工信息
                getDeptInfo($(this).attr("edit-id"));

                $("#empUpdataModal").modal({
                    backdrop:"static"
                });
            })

            function getDeptInfo(id){
                var emprid = id;
                $.ajax({

                    url: "emp/empfindbyId/" + emprid,
                    type: "get",
                    dataType: "json",
                    success: function (result) {
                        // alert(result.education)
                        var job= result.job;
                        var dept=result.deptId;
                        $("#empid").val(result.empId)
                        $("#empname").val(result.ename)
                        $("#account").val(result.account)
                        $("#tel").val(result.tel)
                        $("#empUpdataModal #role").val([job])
                        $("#empUpdataModal #dept").val([dept])

                        // $("#empUpdataModal input[name=pass]").val([result.gender]);

                    }
                })
            }

            $(document).on("click","#emp_save_btnupdata",function(){
                // alert($("#updataformupdata").serialize())
              var data= $("#updataformupdata").serialize()
                $.ajax({
                    url: "emp/updata",
                    type: "GET",
                    data: data,
                    success: function (resp) {
                        // alert(resp)
                        $("#empUpdataModal").modal('hide')
                        $("#page_info_area").empty();
                        $("#page_nav_area").empty();
                        $("#role").empty();
                        $("#dept").empty();
                        $(".layui-card").load("http://localhost:8086/jump?url=view/admin-list.html ");
                    }
                })
            })
        </script>
    </head>
    <body>
<!--    员工编辑模态框-->
    <div class="modal fade" id="empUpdataModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabelupdata">员工修改</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="updataformupdata">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="hidden" name="empId" class="form-control" id="empid"  >

                                <input type="text" name="ename" class="form-control" id="empname" placeholder="empName" >
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">账号</label>
                            <div class="col-sm-10">
                                <input type="text" name="account" class="form-control" id="account" placeholder="email@atguigu.com" readonly>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">手机号</label>
                            <div class="col-sm-10">
                                <input type="text" name="tel" class="form-control" id="tel" placeholder="email@atguigu.com">
                                <span class="help-block"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">角色</label>
                            <div class="col-sm-4">
                                <!-- 部门提交部门id即可 -->
                                <select class="form-control" name="job" role="role" id="role">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">部门</label>
                            <div class="col-sm-4">
                                <!-- 部门提交部门id即可 -->
                                <select class="form-control" name="deptId" id="dept">
                                </select>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="btncloseupdata">关闭</button>
                    <button type="button" class="btn btn-primary" id="emp_save_btnupdata">修改</button>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">

                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="注册时间" name="end" id="end">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" name="username"  placeholder="请输入姓名" autocomplete="off" class="layui-input">
                                </div>
<!--                                <div class="layui-inline layui-show-xs-block">-->
<!--                                        <div class="layui-input-inline">-->
<!--                                            <select name="role" id="role">-->
<!--                                                <option value="">请选择角色</option>-->
<!--&lt;!&ndash;                                                <option value="0">超级管理员</option>&ndash;&gt;-->
<!--&lt;!&ndash;                                                <option value="1">业务员</option>&ndash;&gt;-->
<!--&lt;!&ndash;                                                <option value="2">风控员</option>&ndash;&gt;-->
<!--&lt;!&ndash;                                                <option value="3">财务员</option>&ndash;&gt;-->
<!--                                             </select>-->
<!--                                        </div>-->
<!--                                </div>-->
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn" type="button" id="search"><i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-header">
                           <!-- <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>-->
                            <button class="layui-btn" onclick="xadmin.open('添加管理员','jump?url=view/admin-edit.html',800,500)"><i class="layui-icon"></i>添加</button>

                        </div>
                            <div class="layui-card-body " id="z1">
                            <table class="layui-table layui-form" id="user_table">
                              <thead>
                                <tr>
                                  <th>序号</th>
                                  <th>姓名</th>
                                  <th>账号</th>
                                  <th>手机号</th>
                                  <th>角色</th>
                                  <th>部门</th>
<!--                                  <th>状态</th>-->
                                  <th>操作</th>
                                </tr>
                              </thead>

                              <tbody id="adminData">

                              </tbody>

                            </table>
                        </div>
                        <div class="layui-card-body ">
<!--                            <div id="page">-->

<!--                            </div>-->

                            <div class="row">
                                <div class="row">
                                    <!--分页文字信息  -->
                                    <div class="col-md-6" id="page_info_area"></div>
                                    <!-- 分页条信息 -->
                                    <div class="col-md-6" id="page_nav_area">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<!--        <script src="../js/jquery-1.4.2.js"></script>-->
<!--        <script src="../js/common/ajaxcommon.js"></script>-->
<!--        <script src="../js/fangjs/admin_list.js"></script>-->
    <script>

      layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var form = layui.form;
        
        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });
      });

    </script>
<!--    <script>var _hmt = _hmt || []; (function() {-->
<!--        var hm = document.createElement("script");-->
<!--        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";-->
<!--        var s = document.getElementsByTagName("script")[0];-->
<!--        s.parentNode.insertBefore(hm, s);-->
<!--      })();</script>-->
    </body>

</html>